<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件</title>
		<style type="text/css">
			input {
				font-size: 26px;
				margin-top: 20px;
			}

			body {
				background-image: url(img6/grassland.png);
			}

			#mytank {
				position: absolute;
				left: 10px;
				top: 100px
			}
		</style>
	</head>
	          <!-- // 唐杰 179000950 -->
	<body>
		<input id="b1" type="button" value="按钮一" />
		<input id="b2" type="button" value="按钮二" />
		<input id="b3" type="button" value="按钮三" />
		<hr />
		<img id="mytank" src="images/right.png" />
		<script type="text/javascript">
			// 右
			var mytank = document.getElementById('mytank');
			window.addEventListener(
				'keydown',
				function(e) {
					console.log(e.keyCode);
					if (e.keyCode == 39) {
						mytank.src = "img6/right.png";

						if (mytank.style.left == "1400px") {} else {
							mytank.style.left = (mytank.offsetLeft + 10) + 'px';
						}

					}
				});
			// 左
			window.addEventListener(
				'keydown',
				function(e) {
					console.log(e.keyCode);
					if (e.keyCode == 37) {
						mytank.src = "img6/left.png";
						if (mytank.style.left == "0px") {} else {
							mytank.style.left = (mytank.offsetLeft - 10) + 'px';
						}
					}
				});
				//唐杰 179000950
			// 上
			window.addEventListener(
				'keydown',
				function(e) {
					console.log(e.keyCode);
					if (e.keyCode == 38) {
						mytank.src = "img6/up.png";
						if (mytank.style.top == "0px") {} else {
							mytank.style.top = (mytank.offsetTop - 10) + 'px';
						}

					}
				});
				//唐杰 179000950
			//下
			window.addEventListener(
				'keydown',
				function(e) {
					console.log(e.keyCode);
					if (e.keyCode == 40) {
						mytank.src = "img6/down.png";
						console.log(mytank.style.top);
						if (mytank.style.top == "630px") {} else {
							mytank.style.top = (mytank.offsetTop + 10) + 'px';
						}
					}
				});
			//1  	点击按钮一，弹出信息提示框，显示“javascript事件测试一”
			var b1 = document.querySelector("#b1");
			b1.onclick = () => alert("javascript事件测试一");
			//2    双击按钮二，按钮文字变为“按钮二测试”；
			var b2 = document.getElementById("b2");
			b2.ondblclick = () => alert("javascript事件测试二");
			// 3	鼠标移到按钮三上，按钮三的背景和文字颜色改变；
			// 同时，单击按钮三，弹出框显示“javascript事件测试三”
			var b3 = document.querySelector("#b3");
			b3.onmousemove = function() {
				this.style.background = "blue"
				this.style.color = "#fff"
			}
			b3.onclick = () => alert("javascript事件测试三");
		</script>
	</body>
</html>
